<mat-card class="card">
  <mat-card-header>
    <h3 mat-card-title>
      {{ 'Workloads' | translate }}
    </h3>
  </mat-card-header>
  <mat-card-content>
    <div class="details-item">
      <div class="label">
        {{ 'Ports' | translate }}
        <ix-tooltip
          class="ports-tooltip"
          placement="left"
          [message]="helptext.ports"
        ></ix-tooltip>
      </div>
      <div class="value">
        @for (port of hostPorts(); track port.hostPort) {
          <div>
            <span
              class="with-tooltip"
              [matTooltip]="'Host' | translate"
            >{{ port.protocol }}://{{ port.hostIp }}:{{ port.hostPort }}</span>

            <span class="separator">:</span>

            <span
              class="with-tooltip"
              [matTooltip]="'Container' | translate"
            >{{ port.containerPort }}</span>
          </div>
        } @empty {
          {{ 'N/A' | translate }}
        }
      </div>
    </div>

    <div class="containers">
      <h4>
        {{ 'Containers' | translate }}

        @if (app().active_workloads.container_details.length > 0) {
          <span class="containers-count">
            {{ app().active_workloads.containers | number }}
          </span>
        }
      </h4>
      <div class="container-list">
        @for (container of app().active_workloads.container_details; track container.id) {
          <div class="container">
            <div class="service-name">{{ container.service_name }}</div>
            <div>&ndash;</div>
            <div class="container-state">
              {{ container.state | mapValue: appContainerStateLabels | translate  }}
            </div>
            @if (app().state === AppState.Running || app().state === AppState.Deploying || app().state === AppState.Crashed) {
              <div class="container-action">
                <a
                  *ixRequiresRoles="requiredRoles"
                  mat-icon-button
                  matTooltipPosition="above"
                  [attr.aria-label]="'Shell' | translate"
                  [ixTest]="[container.service_name, 'shell']"
                  [matTooltip]="'Shell' | translate"
                  [routerLink]="getShellLink(container)"
                >
                  <ix-icon name="mdi-console"></ix-icon>
                </a>
                <button
                  mat-icon-button
                  matTooltipPosition="above"
                  [attr.aria-label]="'Volume Mounts' | translate"
                  [ixTest]="[container.service_name, 'volume-mounts']"
                  [matTooltip]="'Volume Mounts' | translate"
                  (click)="volumeButtonPressed(container)"
                >
                  <ix-icon name="mdi-folder-outline"></ix-icon>
                </button>

                <a
                  mat-icon-button
                  matTooltipPosition="above"
                  [attr.aria-label]="'View Logs' | translate"
                  [ixTest]="[container.service_name, 'view_logs']"
                  [matTooltip]="'View Logs' | translate"
                  [routerLink]="getViewLogsLink(container)"
                >
                  <ix-icon name="mdi-text-box"></ix-icon>
                </a>
              </div>
            }
          </div>
        } @empty {
          {{ 'No containers are available.' | translate }}
        }
      </div>
    </div>
  </mat-card-content>
</mat-card>




